<template>
  <div class="lc_wrap">

    <el-row class="trendanalysis">
      <el-col :span="leftWidth">
        <div class="box treeBox">
          <basic-container>
            <lcCheckBoxTree @ready="ready" isAll="0"></lcCheckBoxTree>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="rightWidth" class="table-wrapper" style="position: relative">
        <overlay @changeTreeBox="changeTreeBox"></overlay>
        <basic-container>
          <div class="search-tools">
            <div class="search-left">
              <!-- 时 -->
              <div v-if="dateType==1">
                <el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd"
                                :picker-options="pickerOption" placeholder="选择日期" :clearable='false'></el-date-picker>
                <el-time-select v-model="hourTime" size="small" placeholder="选择时间" :picker-options="{
                                    start: '00:00',
                                    step: '01:00',
                                    end: '23:00'
                                }" :clearable="false" style="margin-left:10px"></el-time-select>
              </div>
              <!-- 日 -->
              <div v-if="dateType==2">
                <el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd"
                                :picker-options="pickerOption" placeholder="选择日期" :clearable='false'></el-date-picker>
              </div>
              <!-- 周 -->
              <div v-if="dateType==3">
                <el-date-picker v-model="dateTime" type="week" size="small" format="yyyy 第 WW 周"
                                value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择周"
                                :clearable='false'></el-date-picker>
              </div>
              <!-- 月 -->
              <div v-if="dateType==4">
                <el-date-picker v-model="dateTime" type="month" size="small" value-format="yyyy-MM"
                                :picker-options="pickerOption" placeholder="选择月份" :clearable='false'></el-date-picker>
              </div>
              <!-- 年 -->
              <div v-if="dateType==5">
                <el-date-picker v-model="dateTime" type="year" size="small" value-format="yyyy"
                                :picker-options="pickerOption" placeholder="选择年份" :clearable='false'></el-date-picker>
              </div>
              <div style="margin-left:20px;">
                <el-select size="small" v-model="gene">
                  <el-option v-for="(item, index) in geneList" :key="index" :label="item.alias"
                             :value="item.factorCode">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="search-right">
              <div class="search-tabs">
                <el-radio v-model="dateType" v-for="(item, index) in dateTypeList" :key="index" :label="item.id"
                          :disabled="item.disable">{{ item.value }}
                </el-radio>
              </div>
              <div class="searcg-btns">
                <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜 索</el-button>
              </div>
            </div>
          </div>
          <!--          <div v-if="isEmpty" class="empty">暂无数据</div>-->
          <noData v-if="isEmpty"></noData>
          <e-chart v-else autoresize :options="chartOptions" style="height:92%;"></e-chart>
        </basic-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getDeptTree, getTypes, getLine, getFactorList} from "@/api/dust/trendanalysis";
import {mapGetters} from "vuex";
import {dateFormat} from "@/util/date";
import lcCheckBoxTree from "@/components/common/tree_checkBox.vue";
import noData from "@/components/common/noData";
import overlay from "@/components/common/overlay.vue";

export default {
  components: {
    lcCheckBoxTree,
    noData,
    overlay
  },
  data() {
    let _this = this
    return {
      isEmpty: true,
      chartOptions: {},
      leftWidth: this.$leftWidth,
      rightWidth: this.$rightWidth,
      data: [],
      deptInfoName: '',
      deptInfoId: '',
      dateType: '', // 日期格式：日、月、年
      // dateTime: dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss'),
      dateTime: dateFormat(new Date(), 'yyyy-MM-dd'), // 默认显示的日期
      dateTime2: '',
      hourTime: '00:00',
      dateTypeList: [],
      pickerOption: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return _this.dateType == 3 ? false : time.getTime() > Date.now()
        },
      },
      nodeList: [], // 存放已勾选节点value的数组（底层节点
      geneList: [],
      gene: '',
      unit: '',
      t2: null,
      interval: 59
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  mounted() {

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    dateType() {
      this.dateTime = dateFormat(new Date(), 'yyyy-MM-dd') // 默认显示的日期
    },
  },
  methods: {
    getDateTime2() {
      let myDate = null
      switch (this.dateType) {
        case 1: // 时
          myDate = this.dateTime.slice(0, 10) + ' ' + this.hourTime.slice(0, 2)
          break;
        case 2: // 日
          myDate = this.dateTime.slice(0, 10)
          this.interval = 59
          break;
        case 3: // 周
          myDate = this.dateTime.slice(0, 10)
          break;
        case 4: // 月
          myDate = this.dateTime.slice(0, 7)
          this.interval = 0
          break;
        case 5: // 年
          myDate = this.dateTime.slice(0, 4)
          this.interval = 0
          break;
        default:
          myDate = this.dateTime
          break;
      }
      this.dateTime2 = myDate;
    },
    onLoad() {
      this.getDateTime2()
      getTypes().then(res => {
        this.dateTypeList = res.data.data;
        this.dateType = this.dateTypeList[0].id;
        this.getFactorList()
      })

    },
    ready(val) {
      this.nodeList = val
      let that = this
      clearTimeout(this.t2)
      this.t2 = null
      clearTimeout(this.timer)
      this.timer = null
      // 设置定时器，100ms后再请求数据（100ms内没有被再次勾选的话）
      this.t2 = setTimeout(() => {
        that.onLoad()
      }, 100)
    },
    getFactorList() {
      if (this.nodeList.length == 0) {
        this.isEmpty = true//如果没有选中 则暂无数据
        this.chartOptions = {}
        return
      }
      getFactorList(this.nodeList.join(',')).then(res => {
        this.geneList = res.data.data;
        this.gene = this.geneList[0].factorCode;
        this.unit = this.geneList[0].unit
      }).then(() => {
        this.getLine()
      })
    },

    changeTreeBox() {
      this.leftWidth = this.leftWidth == this.$leftWidth ? 0 : this.$leftWidth
      this.rightWidth = this.rightWidth == this.$rightWidth ? 24 : this.$rightWidth
    },
    // 搜索
    search() {
      for (var i = 0; i < this.geneList.length; i++) {
        if (this.gene == this.geneList[i].factorCode) {
          this.unit = this.geneList[i].unit
          break;
        }
      }
      this.getDateTime2()
      this.getLine()
      // this.onLoad()
    },
    getLine() {
      getLine(this.gene, this.dateTime2, this.nodeList.join(','), this.dateType).then(res => {
        let isArrs = [] //定义一个空数组
        let isFlag = null //定义一个变量
        res.data.data.forEach(item => {
          let isArr = this._ifFlag(item.yarray) //判断每个站点yarray数组里面的值是否都为0 取反 全部为0 false 反之 true
          isArrs.push(isArr) //选中所有站点
        })
        isFlag = this._isHas(isArrs) //选中所有站点  如果里面有任何一个是ture 则显示报表 否则 暂无数据
        this.isEmpty = isFlag == true ? false : true //暂无数据隐藏 isflag false 则isEmpty true
        if (isFlag) { ////选中所有站点  如果里面有任何一个是ture
          this.chartOptions = {
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            // color: '#1148ff',
            legend: {
              // data: ['站点1', '站点2', '站点3', '站点4']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              data: [],
              axisLabel: {
                interval: this.interval, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                color: '#ccc'
              },
              axisLine: {
                lineStyle: {
                  color: '#505b83'
                } // x轴坐标轴颜色
              },
              axisTick: false
            }],
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} ' + this.unit,
                color: '#333',
              },
              axisLine: {
                lineStyle: {
                  color: '#505b83'
                } // x轴坐标轴颜色
              },
              axisTick: false,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#374062',
                  type: 'dashed' //设置背景为虚线
                }
              }
            },
            series: []
          }
          this.chartOptions.xAxis[0].data = res.data.data[0].xarray; //x轴数据
          res.data.data.map((item, ind) => {
            this.chartOptions.series.push({
              data: item.yarray,
              type: 'line',
              smooth: 0.5,
              name: item.siteName
            })
          })
        }
      })
    },
    _isHas(arr) {
      return arr.includes(true)
    },
    _ifFlag(arr) {
      return !arr.every(i => i === '') //判断数组里面的值都为0
    }
  }
};
</script>
<style lang="scss" scoped>
.empty {
  position: absolute;
  left: 0;
  top: 20%;
  color: #ccc;
  right: 0;
  bottom: 20%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #909399;
}

.map {
  width: 100%;
  height: 500px;
}

.box {
  height: 100%;
  margin-bottom: 0;
}

.search-left {
  display: flex;
  height: 33px;
  line-height: 33px;
}

.el-row {
  height: calc(100% - 20px);
}

.el-col {
  height: 100%;
  overflow: auto;
}

.search-tools {
  height: 49px;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}

.search-right {
  display: flex;
}

.search-tabs {
  height: 33px;
  display: flex;
  align-items: center;
  margin-right: 40px;
}

.overlay {
  position: absolute;
  width: 200px;
  height: calc(100% - 35px);
  opacity: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;

  .tree-tool {
    height: 34px;
    width: 18px;
    background: #fff;
    box-shadow: 2px 1px 4px #ccc;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    display: flex;
    padding: 6px 0;
    z-index: 9999;

    .tool-line {
      margin-left: 3px;
      height: 100%;
      border-left: 1px solid #ddd;
    }
  }
}

.overlay:hover {
  opacity: 1;
}
</style>
